body {
    font: normal 12px/16px "Arial"; margin: 0; padding: 16px 32px;
}

.hidden {
	display: none;
}

h1 {
    margin-bottom: 24px; color: #61ba61;
}

p {
    background: #f7f7ff; color: #338; padding: 16px; margin: 0 0 20px 0;
}

.code {
    float: left; width: 58%;
}

.code > div {
    background: #f7f7f7; margin-bottom: 20px;
}

.code > div > b {
    display: block; background: #7ba983; color: #fff; padding: 8px;
}

.code > div > b > em {
    color: #ff7; font-style: normal;
}

.code > div > pre {
    display: block; padding: 12px 24px; font-size: 1em; font-family: "Arial";
}

.result {
    width: 38%; float: right;
}

.result > b {
    display: block; background: #588; color: #fff; padding: 8px;
}

.result > div {
    background: #f7f7f7; padding: 16px;
}

.field-error {
    display: block; color: red; margin-bottom: 5px;
}

.message.error {
	display: block; background: #fff7f7; color: #a55; padding: 12px 8px; text-align: center; margin-top: 8px;
}

/* TABLES */
.table {
    border: 1px solid red; display: table; border-collapse: collapse;
    -moz-box-shadow: 0px 0px 8px #ddd; -webkit-box-shadow: 0px 0px 8px #ddd; -o-box-shadow: 0px 0px 8px #ddd; -ms-box-shadow: 0px 0px 8px #ddd; box-shadow: 0px 0px 8px #ddd;
}

.table > div.header > span {
	background: #b55; color: #fff; border: 1px solid #a33;
}

.table > div {
	display: table-row;
}

.table > div > span {
	display: table-cell;
	border: 1px solid #ccc;
	padding: 3px 12px;
}

/* ******** */
.tabs {
    border-bottom: 1px solid #59a;
}

.tabs a {
    display: inline-block; padding: 6px 24px; background: #59a; color: #fff; text-decoration: none;
    -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; -o-border-radius: 5px 5px 0 0; -ms-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
}

.tabs a:hover {
    background: #7bc;
}

.tabs a.active {
    background: #a59;
}
